<template>
    <div>
        <!--旋转马-->
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <g>
                <text font-family="微软雅黑" font-size="20" y="100" x="100">马</text>
                <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 100 100" to="200 100 100" repeatCount="indefinite" />
            </g>
        </svg>
        <!--自定义图标-->
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <rect height="80" width="80" x="10" y="10" fill="blue" />
        </svg>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 10 L50 10 L50 50  Z" fill="red" />
            <!--M10 10指定起始点，L50 10和L50 50指定直线路径，Z闭合路径。-->
        </svg>
        <div class="bounded-wave-loader">
            <svg xmlns="http://www.w3.org/2000/svg" width="960" height="80" fill="DodgerBlue" viewbox="0 0 120 10">
                <path d="M0,5 C20,-10 40,20 60,5 v5 H0" />
                <path transform="translate(60)" d="M0,5 C20,-10 40,20 60,5 v5 H0" />
            </svg>
        </div>
        <div class="container">
            <div class="loader loader1"></div>
            <div class="loader loader2"></div>
            <div class="loader loader3"></div>
            <div class="loader loader4"></div>
            <div class="loader loader5"></div>
            <div class="loader loader6"></div>
            <div class="loader loader7"></div>
            <div class="loader loader8"></div>
            <div class="loader loader9"></div>
            <div class="loader loader10"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SvgAnimation'
};
</script>

<style scoped>
/**波浪 s*/
.bounded-wave-loader {
    /**transform: translate(-50%, -50%);*/
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 0 4px #000;
    position: relative;
}
.bounded-wave-loader svg {
    position: absolute;
    bottom: 0;
    animation: shift 1s linear infinite;
}

@keyframes shift {
    100% {
        transform: translateX(-50%);
    }
}

/**波浪 e*/
@keyframes glow {
    50% {
        border-color: lime;
        width: 95%;
        box-shadow: 0px 0px 10px -2px green;
    }
    100% {
        border-color: green;
        width: 35%;
        box-shadow: 0px 0px 10px -2px green;
    }
}
.sep {
    width: 35%;
    border-bottom: 2px solid green;
    margin-bottom: 20px;
    animation: glow 8s infinite;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    width: 75%;
    padding: 10%;
    flex-wrap: wrap;
}
.loader {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 20px;
}
@keyframes load {
    50% {
        transform: rotatez(180deg) scale(0.2);
        border-color: orange;
    }
    100% {
        transform: rotatez(360deg) scale(1.1);
    }
}
.loader1::before {
    content: '';
    color: white;
    height: 30px;
    width: 30px;
    background: transparent;
    border-radius: 45%;
    border: 25px dotted lime;
    animation: load 1s infinite ease-in-out;
}

@keyframes load2 {
    50% {
        transform: rotatez(180deg);
        border-radius: 55%;
    }
    100% {
        transform: rotatez(360deg);
    }
}
.loader2::before {
    content: '';
    color: white;
    height: 30px;
    width: 30px;
    background: transparent;
    border-radius: 10%;
    border: 25px inset orange;
    animation: load2 1s infinite ease-in-out;
}
@keyframes load3 {
    50% {
        transform: rotatez(180deg) scale(1.5);
        border-style: dotted;
    }
    100% {
        transform: rotatez(360deg) scale(0.9);
    }
}
.loader3::before {
    content: '';
    color: white;
    height: 30px;
    width: 30px;
    background: transparent;
    border-radius: 50%;
    border: 15px solid blue;
    border-color: #1565c0 #26c6da;
    animation: load3 2s infinite;
}
@keyframes load4 {
    50% {
        transform: rotatez(180deg);
        border-width: 30px;
    }
    100% {
        transform: rotatez(360deg);
    }
}
.loader4::before {
    content: '';
    color: white;
    height: 30px;
    width: 30px;
    background: transparent;
    border-radius: 50%;
    border: 15px ridge lime;
    border-color: lime transparent;
    animation: load4 1s infinite;
}
@keyframes load5 {
    40% {
        transform: rotatez(-180deg);
        border-width: 16px;
    }
    80% {
        transform: rotatez(-360deg);
    }
    100% {
        transform: rotatez(-360deg);
    }
}
.loader5::before {
    content: '';
    color: white;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    border: 10px dotted lime;
    border-left-color: transparent;
    animation: load5 1s infinite ease-in-out;
}
@keyframes load6 {
    50% {
        transform: rotatez(180deg);
        border-width: 40px;
    }
    100% {
        transform: rotatez(360deg);
    }
}
.loader6::before {
    content: '';
    color: white;
    height: 0px;
    width: 0px;
    background: transparent;
    border-radius: 50%;
    border: 35px ridge red;
    border-color: indigo lime yellow orangered;
    animation: load6 0.5s infinite;
}
@keyframes load7 {
    100% {
        transform: rotatez(360deg);
    }
}
.loader7::before {
    content: '';
    color: white;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    border: 10px solid blue;
    border-color: #0277bd #0277bd #0277bd #81d4fa;
    animation: load7 0.6s infinite ease-in-out;
    box-shadow: 0px 0px 40px -2px skyblue;
}

@keyframes load8 {
    100% {
        transform: rotatez(360deg);
    }
}
.loader8::before {
    content: '';
    color: white;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    border: 10px solid transparent;
    border-color: #039be5 #039be5 transparent transparent;
    animation: load8 0.6s infinite;
}
@keyframes load9 {
    50% {
        transform: rotatez(180deg) scale(0.6);
    }
    100% {
        transform: rotatez(360deg) scale(1);
    }
}
.loader9::before {
    content: '';
    color: white;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    border: 20px dashed transparent;
    border-color: #039be5 indianred;
    animation: load9 0.6s infinite ease-in-out;
}

@keyframes load10 {
    50% {
        transform: rotatez(180deg);
        border-style: dashed;
        border-color: red maroon indianred orangered;
    }
    100% {
        transform: rotatez(360deg);
    }
}
.loader10::before {
    content: '';
    color: white;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    border: 20px solid red;
    animation: load10 1s infinite;
}
</style>
